<template>
  <div class="page_main" :class="className">
    <ul class="nav_list">
      <li @click="menuClick(1)">观点列表</li>
      <li @click="menuClick(2)">投顾列表</li>
      <li @click="menuClick(3)">嵌套路由页面</li>
      <li @click="menuClick(4)">嵌套路由子页面</li>
      <li @click="menuClick(5)">TypeScript开发页面</li>
    </ul>
    <div class="alert-test" @click="alertShow">alert弹窗</div>
    <!-- <h-alert v-model="alertShow" title="成功提示" content="数据请求已经成功" @onSure="onSureFun" :mask="true"></h-alert> -->
    <div align="center">
      <img src="../assets/images/avatar.gif" height="82" width="82" />
      <img src="../assets/images/avatar.jpg" height="82" width="82" />
      <img src="../assets/images/avatar.png" height="82" width="82" />
    </div>
    <div align="center" @click="cfevent1" @touchend="cfevent3" @dblclick="cfevent2" @mousedown="cfevent4">
      <img src="../assets/images/logo.png" width="100" />
    </div>
  </div>
</template>

<script>
//eslint-disable-next-line
import {myStockListMD5Check } from '@/service/comService'
export default {
  name: 'index',
  data() {
    return {
      className: 'index',
    }
  },
  created() {
    myStockListMD5Check().then(
      res => {
        console.log(res)
      },
      err => {
        console.log(err)
      },
    )
  },
  methods: {
    menuClick(num) {
      if (num === 1) {
        this.$router.push({ path: '/viewpoint' + '?fang=liu', query: { key: '1', title: '测试详细页' } })
      } else if (num === 2) {
        this.$router.push({ name: 'touguList', params: { key: '2' } })
      } else if (num === 3) {
        this.$router.push({ name: 'twopage', params: { key: '3' } })
      } else if (num === 4) {
        this.$router.push({ name: 'subpage', params: { key: '4' } })
      } else if (num === 5) {
        this.$router.push({ name: 'typescript', params: { key: '5' } })
      }
    },
    onSureFun() {
      console.log('onSureFun')
    },
    pageBack() {
      this.$router.go(-1)
    },
    cfevent1() {
      console.log('click')
    },
    cfevent2() {
      console.log('dbclick')
    },
    cfevent3() {
      console.log('touchend')
    },
    cfevent4() {
      console.log('mousedown')
    },
    alertShow() {
      this.$alert({
        title: '标题',
        mes: '提示内容',
      })
    },
  },
}
</script>

<style>
.alert-test {
  text-align: center;
  padding: 5px;
}
</style>
